import React, { Component, Fragment } from 'react';
import {
  StyleSheet, View, Text, Image, TouchableOpacity,
  Linking, NativeModules, BackHandler
} from 'react-native';
import { SafeAreaView } from 'react-navigation';
import LinearGradient from 'react-native-linear-gradient';
import { px2dp, screenWidth } from '../../../../../common/styles';
// import DetailBox from './detail_box';
import { msg, Header, _ } from '../../../../../common';
import { leftBack } from '../../../../../image';
/**
 * @modifyAuthor kanglang
 * @description 司机/货主详情页面
 * @createDate 2020/8/26
 *
 *
 */
export default class DriverDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: require('../../../../../image/icons/defaultman.png'),
      data: {},
    };
  }

    handleFunc = () => {
      const { data } = this.state;
      const phone = data && (data.businessManMobile || data.mobile);
      if (!phone) return msg.emit('app:tip', { text: '联系电话无效' });
      const url = `tel:${phone}`;
      Linking.canOpenURL(url)
        .then((supported) => {
          if (!supported) {
            NativeModules.WindowModule.showWindow(
              {
                content: `您的设备不支持该功能，请手动拨打${phone}`,
                onlyRightBtn: '1',
              },
              (e) => { },
            );
            return;
          }
          return Linking.openURL(url);
        })
        .catch((err) => {
          msg.emit('app:tip', { text: err });
        });
    }

    componentDidMount() {
      const { navigation } = this.props;
      const state = navigation.state || {};
      const params = state.params || {};
      const { data } = params;
      if (data.head) {
        this.setState({
          avatar: { uri: data.head },
        });
      }
      this.setState({
        data
      });
      if (Platform.OS == 'android') {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

    componentWillUnmount() {
      if (Platform.OS == 'android') {
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

    onBackAndroid = () => {
      msg.emit('router: back');
      return true;
    }

    render() {
      const { avatar, data } = this.state;
      const supplyJoinTime = data && data.joinTime || '';
      const joinTime = `${supplyJoinTime.substring(0, 4)}.${supplyJoinTime.substring(5, 7)}.${supplyJoinTime.substring(8, 10)}`;
      return (
        <SafeAreaView style={styles.safeContainer}>
          <Header
            style={styles.headerStyle}
            renderLeft={() => {
              return (
                <TouchableOpacity
                  activeOpacity={0.8}
                  style={{ paddingVertical: px2dp(14), paddingHorizontal: px2dp(40) }}
                  onPress={this.onBackAndroid}
                >
                  <Image
                    style={[styles.backImg]}
                    source={leftBack}
                    resizeMode='stretch'
                  />
                </TouchableOpacity>
              );
            }}
            title='货主详情'
          />
          <View style={styles.ddContainer}>
            <Image
              style={styles.avatarStyle}
              source={avatar}
            />
            <View style={styles.certFlag}>
              {/* <Image
                            style={styles.certIcon}
                            source={iconCaveatGreen}
                        /> */}
              {/* <Text style={styles.certTip}>已认证</Text> */}
            </View>
            <Text style={styles.driverName}>{data && data.name}</Text>
            <Text style={styles.driverPhone}>{data && (data.businessManMobile || data.mobile)}</Text>
            <View style={styles.innerWrap}>
              <Text style={styles.innerTip}>入驻时间：</Text>
              <Text style={styles.innerTime}>{joinTime}</Text>
            </View>
          </View>
          <View style={styles.partTwo}>
            <View style={[styles.twoBox]}>
              <Text style={styles.numStyle}>{data && data.wayBillCount}</Text>
              <LinearGradient
                style={styles.linearStyle}
                stystart={{ x: 1, y: 1 }}
                end={{ x: 1, y: 1 }}
                colors={['#FFC55D', '#BB934B']}
              />
              <Text>运单量(单)</Text>
            </View>

          </View>
          <View style={styles.btnWrap}>
            <TouchableOpacity
              style={styles.btnStyle}
              onPress={this.handleFunc}
            >
              <Text style={styles.btnText}>联系货主</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      );
    }
}
const styles = StyleSheet.create({
  safeContainer: {
    flex: 1,
    backgroundColor: '#F5F5F5'
  },
  ddContainer: {
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: px2dp(36) * 2,
    paddingBottom: px2dp(28) * 2,
    borderBottomLeftRadius: px2dp(12) * 2,
    borderBottomRightRadius: px2dp(12) * 2
  },
  headWrap: {
    // width: "100%",
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatarStyle: {
    width: px2dp(112) * 2,
    height: px2dp(112) * 2,
    borderRadius: px2dp(112) * 2
  },
  certFlag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#E9F8E9',
    paddingLeft: px2dp(8) * 2,
    paddingTop: px2dp(5),
    paddingRight: px2dp(8) * 2,
    paddingBottom: px2dp(5),
    borderRadius: px2dp(14) * 2,
    top: -10
  },
  certIcon: {
    width: px2dp(11) * 2,
    height: px2dp(11) * 2
  },
  certTip: {
    color: '#2CBD26',
    fontSize: px2dp(11) * 2,
    marginLeft: px2dp(4) * 2
  },
  driverName: {
    color: '#343332',
    fontSize: px2dp(20) * 2,
    marginTop: px2dp(18) * 2
  },
  driverPhone: {
    color: '#999896',
    fontSize: px2dp(14) * 2,
    marginTop: px2dp(8) * 2
  },
  innerWrap: {
    backgroundColor: '#F5F5F5',
    width: px2dp(190) * 2,
    height: px2dp(37) * 2,
    borderRadius: px2dp(8) * 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px2dp(28)
  },
  innerTip: {
    color: '#999896',
    fontSize: px2dp(14) * 2
  },
  innerTime: {
    color: '#343332',
    fontSize: px2dp(14) * 2
  },
  partTwo: {
    marginTop: px2dp(24) * 2,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  mr24: {
    marginRight: px2dp(24) * 2
  },
  twoLeftBox: {
    width: px2dp(155) * 2,
    height: px2dp(282),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(12) * 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  twoRightBox: {
    width: px2dp(155) * 2,
    height: px2dp(282),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(12) * 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  linearStyle: {
    width: px2dp(16) * 2,
    height: px2dp(2) * 2,
    borderRadius: px2dp(2),
    marginTop: px2dp(12) * 2,
    marginBottom: px2dp(12) * 2
  },
  numStyle: {
    color: '#343332',
    fontSize: px2dp(28) * 2
  },
  tipStyle: {
    color: '#999896',
    fontSize: px2dp(14) * 2
  },
  btnWrap: {
    width: '100%',
    height: px2dp(48) * 2,
    position: 'absolute',
    bottom: px2dp(40) * 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnStyle: {
    width: screenWidth - px2dp(35) * 2,
    height: '100%',
    backgroundColor: '#BA914A',
    paddingLeft: px2dp(35),
    paddingRight: px2dp(35),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(6) * 2,
  },
  btnText: {
    color: '#FFFFFF',
    fontSize: px2dp(16) * 2
  },
  backImg: {
    width: px2dp(36),
    height: px2dp(36),
    marginLeft: px2dp(24),
  },
  twoBox: {
    width: '80%',
    height: px2dp(282),
    backgroundColor: '#FFFFFF',
    borderRadius: px2dp(12) * 2,
    justifyContent: 'center',
    alignItems: 'center'
  },
  linearStyle: {
    width: px2dp(16) * 2,
    height: px2dp(2) * 2,
    borderRadius: px2dp(2),
    marginTop: px2dp(12) * 2,
    marginBottom: px2dp(12) * 2
  },
  numStyle: {
    color: '#343332',
    fontSize: px2dp(28) * 2
  },
  tipStyle: {
    color: '#999896',
    fontSize: px2dp(14) * 2
  }
});
